<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="email=no" name="format-detection">
    <meta content="telephone=no" name="format-detection">
    <meta name="msapplication-tap-highlight" content="no">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="shortcut icon" href="http://www.tyfo.com/market/content/home_image/favicon.ico" type="image/x-icon" />
    <title>转盘抽奖</title>
    <script src="http://www.tyfo.com/common/js/jquery-1.11.1.min.js"></script>
    <script src="js/vue.js"></script>   <!--引入vue.js文件-->
    <script src="element-ui/lib/index.js"></script>   <!--引入组件库-->
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">  <!--引入样式库-->
    <script src="js/axios-0.18.0.js"></script>
    <style>
        p,
        body {
            margin: 0;
        }

        .rui-luck-draw {
            width: 100vw;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
        }

        .rui-luck-content {
            height: 75vw;
            width: 75vw;
            max-width: 550px;
            max-height: 550px
        }

        .rui-luck-turntable,
        .rui-luck-pointer {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(0deg);
            transform-origin: center center;
            -webkit-transform-origin: center center;
            -moz-transform-origin: center center;
            -ms-transform-origin: center center;
            -o-transform-origin: center center;
        }

        .rui-luck-name {
            font-size: 16px;
            text-align: left;
            height: 30px;
            line-height: 30px;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
        }

        .rui-luck-name a {
            text-decoration: none;
            color: #777;
            padding: 0 20px;
        }

        .rui-luck-pointer {
            width: 21vw;
            height: 21vw;
            max-width: 160px;
            max-height: 160px
        }
    </style>
</head>

<body>
<div id="app">
    <div class="rui-luck-draw">
        <div class="rui-luck-name" style="margin: 10px 0 0 20px">
            <p style="color: #dd4444">注意：每次抽奖消耗10个币</p>
            <p style="color: black">目前有{{TheUser.coins}}个币</p>
        </div>
        <div class="rui-luck-content">
            <div class="rui-luck-box">
                <img id="luckTurntable" src="images/turntable.png" alt="" class="rui-luck-content rui-luck-turntable">
                <img id="luckPointer" @click="startRotate" src="./images/pointer.png" class="rui-luck-pointer" />
            </div>
        </div>
    </div>
</div>
<script src="js/luckDraw.js"></script>
<script>
    new Vue({
        el: '#app',
        mounted() {
            this.findUser();
        },
        data: {
            luckArr: ['头等大奖', '谢谢参与', '20个币奖励', '谢谢参与', '100个币奖励', '谢谢参与'],
            name:'',
            password:'',
            TheUser:{},
            isLogin:false,
        },
        methods: {
            startRotate() {
                if (this.TheUser.coins >= 10) {
                    axios.get("users/updateCoins", { params: { uid: this.TheUser.uid, coins: -10 } }).then(x => {
                        this.TheUser.coins = this.TheUser.coins - 10;
                    });
                    var self = this; // 保存 Vue 实例的引用
                    var luck = new LuckDraw();
                    luck._init({
                        rotateId: '#luckTurntable',
                        luckNumber: this.getLuckIndex(), // 使用概率确定奖品
                        typeNumber: 6,
                        time: 2000,
                        type: 'turntable',
                        circleNumber: 10,
                        success: (res) => { // 使用箭头函数
                            console.log(res.luckNumber);
                            if (res.luckNumber !== undefined && res.luckNumber < self.luckArr.length) {
                                console.log(self.luckArr[res.luckNumber]);
                                if (res.luckNumber == 0) {
                                    console.log("ok");
                                }
                                if (res.luckNumber == 4) {
                                    axios.get("users/updateCoins", { params: { uid: self.TheUser.uid, coins: 100 } }).then(x => {
                                        self.TheUser.coins = self.TheUser.coins + 100;
                                    });
                                }
                                if (res.luckNumber == 2) {
                                    axios.get("users/updateCoins", { params: { uid: self.TheUser.uid, coins: 20 } }).then(x => {
                                        self.TheUser.coins = self.TheUser.coins + 20;
                                    });
                                }
                                if (res.luckNumber == 1 || res.luckNumber == 3 || res.luckNumber == 5) {
                                    console.log("ok");
                                }
                                alert(self.luckArr[res.luckNumber]);
                            }
                        }
                    });
                }else{
                    this.$message({
                        message: '金币不足！',
                        type: 'warning'
                    });
                }

            },
            getLuckIndex() {
                var randomNumber = Math.random() * 100; // 生成一个0到100之间的随机数
                if (randomNumber < 10) {
                    return 0; // '头等大奖'，30% 的概率
                } else if (randomNumber < 30) {
                    return 2; // '20个币'，20% 的概率
                } else if (randomNumber < 40) {
                    return 4; // '100个币'，20% 的概率
                } else {
                    return 1; // '谢谢参与'，30% 的概率
                }
            },
            findUser(){
                // 在index.html页面加载时读取
                this.name = getCookie("name");
                this.password = getCookie("password");

                if (this.name && this.name.trim() !== "" && this.password && this.password.trim() !== "") {
                    this.isLogin = true;
                } else {
                    this.isLogin = false;
                }
                // 辅助函数，用于获取cookie的值
                function getCookie(name) {
                    let cookieArr = document.cookie.split(";");
                    for(let i = 0; i < cookieArr.length; i++) {
                        let cookiePair = cookieArr[i].trim().split("=");
                        if (cookiePair[0] === name) {
                            return cookiePair[1];
                        }
                    }
                    return "";
                }
                axios.get("users/findByName_pwd",{params:{name : this.name,password:this.password}}).then(x=>{
                    this.TheUser = x.data;
                })
            },
        }
    });
</script>

</body>

</html>